<div id="overview">
MagicCombo is a small and flexible JQuery ComboBox plugin.
<a href="<?=LP?>javascript/combo">Online Demo</a> and
<a href="<?=LP?>javascript#combo">Download</a>
<ul>
	<li>Support multi columns.</li>
	<li>Multi selection and paging ( with grid ).</li>
	<li>You can put anything into it, such as a grid.</li>
	<li>Support customize style.</li>
	<li>Support load data from url.</li>
</ul>
</div>
<div id="options">
	<h3><a href="#">height</a></h3>
	<p>
		Component height, default 24.
	</p>
	<h3><a href="#">maxkLen</a></h3>
	<p>
		Max chars can input, default 20.
	</p>
	<h3><a href="#">comma</a></h3>
	<p>
		The char for join display value, default ','.
	</p>
	<h3><a href="#">name</a></h3>
	<p>
		Name, the default name is div name attribute.
	</p>
	<h3><a href="#">cols</a></h3>
	<p>
		Same with MagicGrid.
	</p>
	<h3><a href="#">keyField</a></h3>
	<p>
		Key ( Value ) field name.
	</p>
	<h3><a href="#">displayField</a></h3>
	<p>
		Display field name.
	</p>
	<h3><a href="#">multiSelect</a></h3>
	<p>
		Default false.
	</p>
	<h3><a href="#">width</a></h3>
	<p>
		Component width.
	</p>
	<h3><a href="#">maxHeight</a></h3>
	<p>
		Max height of dropdown box.
	</p>
	<h3><a href="#">loader</a></h3>
	<p>
		Same with MagicGrid.
	</p>
	<h3><a href="#">boxHeight</a></h3>
	<p>
		The height of dropdown box. Optional.
	</p>
	<h3><a href="#">boxWidth</a></h3>
	<p>
		The width of dropdown box. Optional. Default be same with component width.
	</p>
	<h3><a href="#">boxTop</a></h3>
	<p>
		The top offset of dropdown box. It is related to component position.
		Optional, Only be needed for postion adjustment. 
	</p>
	<h3><a href="#">boxLeft</a></h3>
	<p>
		The left offset of dropdown box. It is related to component position.
		Optional, Only be needed for postion adjustment. 
	</p>
	<h3><a href="#">boxEl</a></h3>
	<p>
		Which Element or HTML which you want to put in.
	</p>
	<h3><a href="#">readOnly</a></h3>
	<p>
		Default false.
	</p>
	<h3><a href="#">boxMinWidth</a></h3>
	<p>
		The min width of dropdown box.
	</p>
</div>
<div id="events">
	<h3><a href="#">onOpen()</a></h3>
	<p>
		It is triggered when dropdown box is opened.
	</p>
	<h3><a href="#">onSelect(me, dd, sd)</a></h3>
	<p>
		It is triggered when item be selected.
		<ul>
			<li>me: Component self.</li>
			<li>dd: The selected keys.</li>
			<li>sd: The selected objects.</li>
		</ul>
	</p>
	<h3><a href="#">onLoad(self, dd)</a></h3>
	<p>
		It is triggered when data is loaded.
		<ul>
			<li>me: Component self.</li>
			<li>dd: The loaded data.</li>
		</ul>
	</p>
</div>
<div id="methods">
	<h3><a href="#">open()</a></h3>
	<p>
		Open the dropdown box.
	</p>
	<h3><a href="#">close()</a></h3>
	<p>
		Close the dropdown box.
	</p>
	<h3><a href="#">select(a)</a></h3>
	<p>
		Select one item when a is an object, or select multi items when a is an array.
	</p>
	<h3><a href="#">loadData(dd)</a></h3>
	<p>
		Load local data. dd is an object array.
	</p>
</div>
</div>